<template>
  <div class="wrap">
    <a-form class="search" @keyup.enter="handleSearch">
      <a-form-item label="关键词">
        <a-input v-model:value="query.keyword"></a-input>
      </a-form-item>
      <a-form-item label="时间">
        <a-range-picker
          :show-time="{
            defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')]
          }"
          :value-format="moment().format('YYYY-MM-DD HH:mm:ss')"
          v-model:value="query.date"
        />
      </a-form-item>
      <a-button type="primary" class="search-btn" @click="handleSearch">搜索</a-button>
    </a-form>
    <a-table
      :loading="loading"
      :dataSource="tableData"
      :columns="userColumns"
      :pagination="pagination"
      @resizeColumn="handleResizeColumn"
      @change="handlePageChange"
    ></a-table>
  </div>
</template>

<script lang="ts" setup>
import { user_getList } from '@/api/user'
import { ref, reactive, onMounted } from 'vue'
import { useTable } from '@/hooks/useTable'
import { useUser } from '@/hooks/useUser'
import moment from 'moment'
const tableData = ref([])

const query = reactive({
  keyword: undefined,
  date: []
})

const loading = ref(false)

const getData = () => {
  loading.value = true
  const { current: pageNum, pageSize } = pagination
  user_getList({
    keyword: query.keyword,
    beginTime: query.date[0],
    endTime: query.date[1],
    pageNum,
    pageSize
  })
    .then(({ data }) => {
      tableData.value = data.list
      pagination.total = data.totalNum
    })
    .finally(() => {
      loading.value = false
    })
}

const { pagination, handleSearch, handlePageChange, handleResizeColumn } = useTable(getData)
const { userColumns } = useUser()
onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped></style>
